<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 信息提示 -->
            <el-alert title="添加商品信息" type="info" center show-icon :closable="false">
            </el-alert>

            <!-- 步骤条 -->
            <div class="tiao">
                <el-steps :active="activeIndex - 0" finish-status="success">
                    <el-step title="基本信息"></el-step>
                    <el-step title="商品参数"></el-step>
                    <el-step title="商品属性"></el-step>
                    <el-step title="商品图片"></el-step>
                    <el-step title="商品内容"></el-step>
                    <el-step title="完成"></el-step>
                </el-steps>
            </div>
            <!-- 标签页 -->
            <el-tabs :tab-position="tabPosition" v-model="activeIndex" :before-leave="Function">
                <el-tab-pane label="基本信息" name="0">
                    <!-- 验证表单 -->
                    <!-- 商品名称 -->
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="ruleForm.goods_name"></el-input>
                        </el-form-item></el-form>
                    <!-- 商品价格 -->
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                        <el-form-item label="商品价格" prop="goods_price">
                            <el-input v-model="ruleForm.goods_price"></el-input>
                        </el-form-item></el-form>
                    <!-- 商品重量 -->
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                        <el-form-item label="商品重量" prop="goods_weight">
                            <el-input v-model="ruleForm.goods_weight"></el-input>
                        </el-form-item></el-form>
                    <!-- 商品数量 -->
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                        <el-form-item label="商品数量" prop="goods_number">
                            <el-input v-model="ruleForm.goods_number"></el-input>
                        </el-form-item></el-form>
                    <!-- 商品分类 -->
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                        <el-form-item label="商品分类" prop="carkClassify"><br>
                            <el-cascader @change="handleChange" v-model="carK"
                                :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name' }" style="float: left;"
                                :options="options" clearable></el-cascader>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>


                <el-tab-pane label="商品参数" name="1">
                    <!-- 商品参数 -->
                    <!-- <template>
                        <p>{{ this.nol }}</p>
                        <el-checkbox v-model="item.status" v-for="item, i in nie" :key="i" :label="item.name"
                            border></el-checkbox>
                    </template> -->
                    <!-- <div v-for="item, index in nol" :key="index">
                        <p>{{ item.attr_name }}</p>
                        <el-checkbox style="margin:20px 20px 20px 0;" v-for="ele, i in item.attr_vals.split(' ')" :key="i"
                            :label="ele" border></el-checkbox>
                    </div> -->
                    <MyParas :Static="nol"></MyParas>
                </el-tab-pane>
                <el-tab-pane label="商品属性" name="2">
                    <!-- 静态参数里面的内容 -->
                    <!-- <div v-for="item in Static" :key="item.attr_id" style="text-align:left;">
                        <div>{{ item.attr_name }}</div>
                        <div>
                            <el-checkbox border  v-for="(item, attr_id) in Parameters" :key="attr_id"
                                :label="item.attr_vals"></el-checkbox>
                        </div>
                    </div> -->

                    <MyParas :Static="Static"></MyParas>
                    <!-- <div v-for="item, index in Static" :key="index">
                        <p>{{ item.attr_name }}</p>
                        <el-checkbox style="margin:20px 20px 20px 0;" v-for="ele, i in item.attr_vals.split(' ')" :key="i"
                            :label="ele" border></el-checkbox>
                    </div> -->
                </el-tab-pane>
                <el-tab-pane label="商品图片" name="3">
                    <!-- 图片添加 -->
                    <el-upload action="#" list-type="picture-card" :http-request="handleRequest"
                        :on-remove="handleRemove">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                    <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="商品内容" name="4">
                    <!-- 富文本 -->
                    <div id="div1" style="text-align:left;">
                        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
                    </div>
                    <!-- 添加按钮 -->
                    <el-button style="margin-top: 40px; float: left;" type="primary" @click="add">添加商品</el-button>
                </el-tab-pane>
            </el-tabs>

        </el-card>
    </div>
</template>


<script>
// 富文本
import E from 'wangeditor'
import { cartlist, cartts, addCommodity ,upload} from '../request/Api'
import MyParas from '@/components/MyParas.vue'
// import _  from 'cloneDeep'
export default {
    components: {
        MyParas
    },
    data() {
        return {
            carK: '',
            ipt: '',
            // checked1: true,
            tabPosition: 'left',
            activeIndex: '0',
            options: [],
            // 表单验证
            ruleForm: {
                //商品名称
                goods_name: '',
                // 商品价格
                goods_price: '',
                // 商品重量
                goods_weight: '',
                // 商品数量
                goods_number: '',
                // 商品分类
                carkClassify: '',
                goods_cat:''
            },
            rules: {
                // 商品名称
                goods_name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                ],
                // 商品价格
                goods_price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' },
                ],
                // 商品重量
                goods_weight: [
                    { required: true, message: '请输入商品重量', trigger: 'blur' },
                ],
                // 商品数量
                goods_number: [
                    { required: true, message: '请输入商品数量', trigger: 'blur' },
                ],
                // 商品分类
                carkClassify: [
                    { required: true, message: '请输入商品分类', trigger: 'blur' },
                ],
            },
            // 上传图片
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            // 富文本
            init() {
                const editor = new E('#div1')
                // 或者  const editor = new E( document.getElementById('div1') )
                editor.create()
            },
            id: null,
            // 动态参数
            nol: [],
            nie: '',
            // 静态参数
            Static: [],
            Parameters: '',
        }
    },
    mounted() {
        // 富文本
        this.init()
    },
    created() {
        this.getList()
    },
    methods: {
        // 上传图片
        async handleRequest(e) {
            let formData = new FormData()
            formData.append('file', e.file)
            let { data } = await upload(formData).catch(err => console.error(err))
            console.log(data);
        },
        // 添加商品
        add() {
            // console.log(this.ruleForm);
            // 添加的参数
            let addObj = {
                goods_cat: '1,2,3',
                ...this.ruleForm
            }
            // console.log(addObj);
            addCommodity(addObj).then(res => {
                console.log(res);
                this.$router.push('/Goods')
            })

            // let ruleFrom = _.cloneDeep(this.ruleForm)
            // ruleFrom.goods_cat = ruleFrom.goods_cat.join(",")
            // let manyList = this.nol.map(item=>{
            //     return {
            //         attr_id:item.attr_id,
            //         attr_value:item.checked.join(" ")
            //     }
            // })

            // let onlyList = this.nie.map(item=>{
            //     return {
            //         attr_id:item.attr_id,
            //         attr_value:item.checked.join(" ")
            //     }
            // })
            // ruleFrom.attrs = manyList.push(...onlyList)

        },


        Function(to, from) {
            console.log(to);
            if (from == 0 && this.carK == '') {
                this.$message.error({
                    message: '请先添加商品分类',
                });
                return false

            }
            if (to == 1) {

            }
        },

        // 级联选择器
        getList() {
            cartlist().then(res => {
                // console.log(res);
                this.options = res.data.data
            })
        },
        // 动态参数
        getList1() {
            cartts({
                id: this.id,
                params: {
                    sel: 'many'
                },
            }).then(res => {
                console.log(res);
                this.nol = res.data.data

                // this.nol.forEach(item => {
                //     this.nie = item.attr_vals.split(",");
                //     this.nol = item.attr_name

                // })
                // this.nie = this.nie.map(item => {
                //     return item = {
                //         name: item,
                //         status: true
                //     }
                // })
                // console.log(this.nol);
            })
        },
        // 静态参数
        getList2() {
            cartts({
                id: this.id,
                params: {
                    sel: 'only'
                },
            }).then(res => {
                this.Static = res.data.data
                console.log(this.Static);
                // this.Static.forEach(item => {
                //     this.Parameters = item.attr_vals.split(' ')
                // })
                // this.Parameters = this.Parameters.map(item=>{
                //     return item = {
                //         name:item,
                //         status:true
                //     }
                // })
                // console.log(this.Parameters);
            })
        },
        // 表单验证
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 上传图片
        handleRemove(file) {
            console.log(file);
            this.dialogImageUrl.split(',').splice(file.uid, 1)
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        // 级联选择器
        handleChange(value) {
            console.log(value);
            this.id = value[value.length - 1]
            console.log(this.id);
            this.getList1()
            this.getList2()
        }
    },
}
</script>


<style lang="scss" scoped>
* {
    text-align: left;

}

.box-card {
    width: 96%;
    margin: 30px auto;

    .tiao {
        width: 80%;
        margin: 20px auto;
    }
}
</style>